<!DOCTYPE html>
<%@ include file="/WEB-INF/jsp/include/include.jsp" %>
<html>
  <head>
    <title><fmt:message key="alvin.title" /></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="${ctx}styles/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="${ctx}styles/bootstrap-responsive.min.css" rel="stylesheet" />
    <link href="${ctx}styles/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <link href="${ctx}styles/style.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="${ctx}scripts/bootstrap.min.js"></script>
    <script src="${ctx}scripts/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript">
	  $(function() {
	    $('.date').datetimepicker({
	      language: 'cn',
	      pickTime: false
	    });
	  });
	  
	  function back() {
		  var url = ${ctx}+"login.htm";
		  window.location.href = url;
	  }
	</script>    
  </head>
  <body>
	<form:form cssClass="form-horizontal well" action="${ctx}reg.htm" modelAttribute="user" method="POST">
		<fieldset>
			<legend><fmt:message key="users.register" /></legend>
			<div class="control-group">
			<label class="control-label" for="userName"><fmt:message key="user.userName" /></label>
			<div class="controls">
				<form:input path="userName" cssClass="input-gender" />
	            <form:errors path="userName" cssClass="help-inline"/>
				<form:select path="gender" cssClass="select-gender">
					<form:options items="${genders}" itemValue="name" itemLabel="displayName" />
				</form:select>
			</div>
			</div>
			<div class="control-group">
			<label class="control-label" for="mobile"><fmt:message key="user.mobile" /></label>
			<div class="controls">
				<form:input path="mobile"/>
	            <form:errors path="mobile" cssClass="help-inline" />
			</div>
			</div>
			
			<div class="control-group">
			<label class="control-label" for="babyBirth"><fmt:message key="user.babi" /></label>
			<div class="controls">
				<div class="input-append date">
				<form:input path="babyBirth" data-format="yyyy-MM-dd" cssClass="input-datepicker"/>
				<span class="add-on">
      				<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
    			</span>
				</div>
	            <form:errors path="babyBirth" cssClass="help-inline" />
			</div>
			</div>
						
			<div class="control-group">
			<label class="control-label" for="password"><fmt:message key="user.password" /></label>
			<div class="controls">
				<spring:bind path="password">
					<input name="password" type="password" value="${user.password}" />
				</spring:bind>
	            <form:errors path="password" cssClass="help-inline" />
			</div>
			</div>
			<div class="control-group">
			<label class="control-label" for="confirmPassword"><fmt:message key="user.confirmPassword" /></label>
			<div class="controls">
				<spring:bind path="confirmPassword">
					<input name="confirmPassword" type="password" value="${user.confirmPassword}" />
				</spring:bind>			
	            <form:errors path="confirmPassword" cssClass="help-inline" />
			</div>
			</div>
			<div class="form-actions">
	           <button class="btn btn-primary" type="submit"><fmt:message key="common.submit" /></button>
	           <button class="btn" type="button" onclick="back();"><fmt:message key="common.cancel" /></button>
         	</div>			
	       </fieldset>
	   </form:form>
  </body>
</html>